<?php $bodyClass = "voice" ; ?>
<?php require("../frame/frame_head_echo.php"); ?>

<link rel="stylesheet" href="../css/abp.css" />
<style type="text/css">
	svg {
		position: absolute;
		left: -9999em;
	}
	.blur {
		filter: url(#blur);
		filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=18, MakeShadow=false);
	}
</style>
<script src="../js/CommentCoreLibrary.min.js"></script>
<script src="../js/ABPlayer.min.js"></script>
<script type="text/javascript">
	window.addEventListener("load",function(){
		var video = document.getElementById('video-1')
		var inst = ABP.create(document.getElementById('load-player'), {
			'src':{
				'playlist':[
					{
						'video'     :  video,
						'comments'  :  'xml/comments.xml'
					}
				]
			},
			'width'   :  1024,
			'height'  :  416
		});

		function timeAll() {
			if(video.currentTime != 0){
				return video.duration;
			}else{
				return 0;
			}
		};

		function currentTime() {
			return video.currentTime;
		};

		function songPlaybackTime(timeAll,currentTime) {
			var playTime = document.getElementById('playtime'),
			surplusTime = document.getElementById('surplustime'),
			leftTime,
			rightTime;

			if (currentTime < timeAll) {
				leftTime = parseInt(currentTtime);
				rightTime = parseInt(timeAll - currentTime);
				playTime.innerHTML = conversionTime(leftTime);
				surplusTime.innerHTML = '-' + conversionTime(rightTime);
			} else {
				playTime.innerHTML = '0:00';
				surplusTime.innerHTML = '-0:00';
			}
		};

		function conversionTime(time) {
			var surplusMinite,
			surplusSecond,
			cTime;
			surplusMinite = Math.floor((time / 60) % 60);
			surplusSecond = Math.floor(time % 60);
			if (surplusSecond < 10) {
				surplusSecond = "0" + surplusSecond;
			}
			cTime = surplusMinite + ":" + surplusSecond;
			return cTime;
		}
		
	});
	
</script>

<div class="container voice-container ppt-12 br-6">
	<div class="title-and-category cf">
		<div class="title fl">
			<h1>声音标题</h1>
			<span class="voice-length">3:56</span>
			<span class="played"><b>2.5万</b>播放</span>
		</div>

		<div class="category fr">
			<a href="./channel_detial.php">好听的动漫频道</a>
			<span>频道</span>
		</div>
	</div>

	<div class="voice-wp">
		<div class="mask">
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="0" width="0">
				<filter id="blur">
					<feGaussianBlur stdDeviation="18" />
				</filter>
			</svg>
			<div class="voice-wp-bg"><img class="blur" alt="cover" src="../images/page_images/voice_7.jpg" /></div>
			<div class="bg-mask"></div>
		</div>
		
		<video id="video-1" autobuffer="true" loop="loop" data-setup="{}" style="display:none" width="0" height="0" webkit-playsinline>
			<source src="http://echo-mx.qiniudn.com/1771333295.mp3">
			<p>Your browser does not support html5!</p>
		</video>

		<div id="load-player" class="player"><div id="playtime"></div><div id="surplustime"></div></div>

		<div class="voice-cover br-4"><img class="br-4" alt="cover" src="../images/page_images/voice_7.jpg" /></div>
	</div>

	<div class="user-and-status cf">
		<div class="user fl">
			<a href="#" class="user-avatar"><img src="../images/page_images/user_11.jpg" class="circle" alt="user-avatar" /></a>
			<div class="user-and-time">
				<a href="#" class="user-name">用户名</a>
				<time class="upload-time">32分钟前 上传</time>
			</div>
		</div>

		<div class="btn-wp cf">
			<a href="#" class="fl ht btn like-btn" rel="nofollow">喜欢</a>
			<a href="#" class="fl ht btn share-btn" rel="nofollow">分享</a>
		</div>

		<div class="ui-status voice-status fr cf">
			<span class="share" title="分享数目">372</span>
			<span class="like" title="喜欢数目">76</span>
			<span class="comment" title="评论数目">320</span>
		</div>
	</div>

	<div class="comment-form-wp">
		<form action="#" class="comment-form">
			<input class="comment-input br-3" placeholder="在0:50发个弹幕和评论" type="text" />
			<div class="btn-wp cf">
				<!-- <a class="fl ht btn smiley-btn" rel="nofollow" title="" href="#"></a> -->
				<button class="fl btn submit-btn br-2" type="submit">发送</button>	
			</div>
		</form>
	</div>
</div>

<div class="container cf">
	<div class="intro br-3">
		<h3>简介</h3>
		<p class="error">
			咦？是空的
		</p>
	</div>

	<div class="comments br-3">
		<h3>热门评论</h3>
		<p class="error">
			暂时还没有人评论哦，来评论一个吧！
		</p>
	</div>
</div>

<div class="voice-share-inner-wp">
	<div class="voice-share-inner">
		<div class="voice-share">
			<div class="title-and-btn cf">
				<h4 class="fl">分享<a href="#">echo回声更新版本啦！</a>的声音</h4>
				<span class="close-btn fr"></span>
			</div>
			<ul class="cf">
				<li><a href="#jiathis_button_tsina">微博</a></li>
				<li><a href="#jiathis_button_weixin">微信</a></li>
				<li><a href="#jiathis_button_douban">豆瓣</a></li>
				<li><a href="#jiathis_button_renren">人人</a></li>
				<li><a href="#jiathis_button_qzone">QQ空间</a></li>
			</ul>
		</div>
	</div>
</div>

<div class="jiathis_style hide">
    <a class="jiathis_button_qzone"></a>
    <a class="jiathis_button_tsina"></a>
    <a class="jiathis_button_weixin"></a>
    <a class="jiathis_button_renren"></a>
    <a class="jiathis_button_douban"></a>
</div>
<script type="text/javascript">
    var jiathis_config = {
        title: "echo回声更新版本啦！（来自@echo回声APP）",
        url: "http://echo.kibey.com/sound/341613",
        ralateuid: {
            "tsina": "echoapp"
        },
        appkey: {
            "tsina": "3898630147"
        },
        shortUrl: false,
        hideMore: true
    }

 	$(document).ready(function () {
        $('.share-btn').on('click', function (e) {
            if ($('.voice-share-inner-wp').hasClass('active')) {
                $('html').css({'height':'auto','overflow':'visible'});
                $('body').css({'height':'auto','overflow':'visible'});
                $('.voice-share-inner-wp').removeClass('active');
            } else {
                $('html').css({'height':'100%','overflow':'hidden'});
                $('body').css({'height':'100%','overflow':'hidden'});
                $('.voice-share-inner-wp').addClass('active');
                e.preventDefault();
            }
        });
        $('.close-btn').on('click', function (e) {
            $('html').css({'height':'auto','overflow':'visible'});
            $('body').css({'height':'auto','overflow':'visible'});
            $('.voice-share-inner-wp').removeClass('active');
        });
        $('.voice-share-inner-wp li a').on('click', function () {
            var className = $(this).attr('href').replace('#', '.');
            $(className).click();
        });
    })

		//Support Emoji
		$(function(){
			twemoji.parse($('.comments-list')[0], {
          size: 16,
          callback: function(icon, options) {
              return 'http://kibey-static.qiniudn.com/emoji/' + options.size + '/' + icon + '.png';
          }
			});
		});
</script>

<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>


<?php require("../frame/frame_foot.php"); ?>